<template>
  <page-frame>
    <div class="intelligentHardware">
      <div class="toptitle">
        <div class="left">智能硬件</div>
        <div class="right">
          <div class="btns">
            <div class="alartRecord" @click="batchBinding">
              <img src="../../img/batchBind.png" >
              <span>批量绑定</span>
            </div>
            <div class="alartRecord" @click="deviceBinding">
              <img src="../../img/bind.png" >
              <span>设备绑定</span>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
        <div class="input">
          <el-row>
            <el-col style="width:130px">
              <div class="input-item">
                <el-select style="width:90%!important;"  v-model="serviceId" @change="selectItem" @clear = "clearItem" clearable placeholder="选择条件">
                  <el-option
                    v-for="item in serviceList"
                    :label="item.serviceName"
                    :value="item.serviceId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="serviceId==1">
                <el-input
                  v-model="filterData.supplierName"
                  style="width:81%!important"
                  placeholder="请输入设备供应商"
                  @keyup.enter.native="search">
                </el-input>
              </div>
              <div class="input-item" v-show="serviceId==2">
                <el-select
                  style="width:81%!important"
                  clearable
                  @change="search"
                  v-model="filterData.status"
                  placeholder="请选择设备状态">
                  <el-option value="1" label="闲置"></el-option>
                  <el-option value="2" label="在用"></el-option>
                  <el-option value="3" label="停用"></el-option>
                  <el-option value="4" label="故障"></el-option>
                  <el-option value="5" label="报废"></el-option>
                </el-select>
              </div>
              <div class="input-item" v-show="serviceId==3">
                <el-select
                  style="width:81%!important"
                  clearable
                  @change="search"
                  v-model="filterData.deviceTypeId"
                  placeholder="请选择设备类型">
                  <el-option
                    v-for="item in allDept"
                    :label="item.deviceTypeName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item" v-show="serviceId==4">
                <el-input
                  v-model="filterData.deviceNo"
                  style="width:81%!important"
                  placeholder="请输入设备编号"
                  @keyup.enter.native="search">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <el-button
                class="query lightGreenBtn"
                @click="search"
              >搜索
              </el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @row-dblclick="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="orgName"
              label="机构名称"
            >
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="设备供应商"
            >
            </el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备类型"
            >
            </el-table-column>
            <el-table-column
              prop="deviceNo"
              label="设备编号"
            >
            </el-table-column>
            <el-table-column
              prop="devicestatus"
              label="设备状态"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="bedNo"
              label="绑定床位"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="绑定会员"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="bindstatus"
              label="绑定状态"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="bindTime"
              label="绑定日期"
              width="170"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="150"
            >
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click.stop="Unbundled(scope.row)">解绑</el-button>
                <el-button type="text" size="small" @click.stop="remove(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--解绑确认弹框-->
          <el-dialog title="解绑确认" v-model="unbundled" size="tiny" :close-on-click-modal="false">
            <div class="input-item">
              <label>设备类型：</label>
              <span >{{unbundDevice.deviceName}}</span>
            </div>
            <div class="input-item">
              <label>设备编号：</label>
              <span >{{unbundDevice.deviceNo}}</span>
            </div>
            <div class="input-item">
              <label>绑定床位/会员：</label>
              <span >{{unbundDevice.bedNo}}/{{unbundDevice.memberName}}</span>
            </div>
            <div style="text-align: center;font-size:20px;">请确认是否解绑！</div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="unbundled = false">取 消</el-button>
                <el-button class="lightGreenBtn" @click="unbundSubmit">确 定</el-button>
              </span>
          </el-dialog>

          <!--删除设备弹框-->
          <el-dialog title="删除设备" v-model="delDevice" size="tiny" :close-on-click-modal="false">
            <div class="input-item">
              <label>设备类型：</label>
              <span >{{deleteDevice.deviceType}}</span>
            </div>
            <div class="input-item">
              <label>设备编号：</label>
              <span >{{deleteDevice.deviceNo}}</span>
            </div>
            <div class="input-item">
              <label>绑定床位/会员：</label>
              <span >{{deleteDevice.bed}} {{deleteDevice.memberName}}</span>
            </div>
            <div style="text-align: center;font-size:20px;">请确认是否删除！</div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="delDevice = false">取 消</el-button>
                <el-button class="lightGreenBtn" @click="delDevices">确 定</el-button>
              </span>
          </el-dialog>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>
<script>
  import intelligentHardwareApi from '../../service/healthManagement/intelligentHardwareApi';
  export default {
    data() {
      return {
        currentDeviceId:null,
        unbundled:false,
        delDevice:false,
        serviceId:1,
        filterData:{
          deviceNo: "",
          deviceTypeId: "",
          status: "",
          supplierName: "",
        },
        serviceList:[{
          serviceId: 1,
          serviceName: "设备供应商",
        },{
          serviceId: 2,
          serviceName: "设备状态",
        },{
          serviceId: 3,
          serviceName: "设备类型",
        },{
          serviceId: 4,
          serviceName: "设备编号",
        }],
        allDept:[],
        tableData: [],
        unbundDevice:{
          deviceType:'',
          deviceNo:'',
          bed:'',
          memberName:''
        },
        deleteDevice:{
          deviceType:'',
          deviceNo:'',
          bed:'',
          memberName:''
        },
        total:0,
        currentPage: 1,
      }
    },
    methods: {
      init(){
        this.getAllDevTypes();
        this.loadTableData(1);
      },
      getAllDevTypes(){
        let self = this;
        intelligentHardwareApi.getAllDeviceTypes("01").then(
          (response)=>{
          self.allDept =response.data.data;
          }
        );
      },

      /**
       * get all base data
       */
      loadTableData(pageNum){
        let self = this;
        intelligentHardwareApi.getAllBindDevice(10,pageNum,self.filterData).then(res =>{
          self.tableData = res.data.data.list;
          self.total = res.data.data.total;
        for(var bind of self.tableData){
          switch(bind.bindstatus){
            case 1:
              bind.bindstatus = "已绑";
              break;
            case 0:
              bind.bindstatus ="未绑";
              break;
          };
        };
        for(var bind1 of self.tableData){
          switch(bind1.devicestatus){
            case 1:
              bind1.devicestatus = "闲置";
              break;
            case 2:
              bind1.devicestatus ="在用";
              break;
            case 3:
              bind1.devicestatus ="停用";
              break;
            case 4:
              bind1.devicestatus ="故障";
              break;
            case 5:
              bind1.devicestatus ="报废";
              break;
          };
        };
        },res =>{

        }
        );
      },

      /**
       * search
       */
      search(){
        this.loadTableData(1);
      },

      /**
       * select Item
       */
      selectItem(){
        this.filterData.deviceNo = "";
        this.filterData.deviceTypeId = "";
        this.filterData.status = "";
        this.filterData.supplierName = "";
      },

      /**
       * clear item
       */
      clearItem(){
        this.selectItem();
      },

      /**
       * device batch binding btn
       */
      batchBinding(){
        this.$router.push({name:'batchBind'});
      },

      /**
       * device binding btn(way:1(add device bind))
       */
      deviceBinding(){
        this.$router.push({name:'deviceBind',params:{way:1,deviceId:null}});
      },

      /**
       * get all device type
       */
      getAllDept(){
        let self = this;
      },

      /**
       * “unbind”(operation)
       */
      Unbundled(row){
        this.unbundled = true;
        this.currentDeviceId = row.deviceId;
        this.unbundDevice.deviceName = row.deviceName;
        this.unbundDevice.deviceNo = row.deviceNo;
        this.unbundDevice.bedNo = row.bedNo;
        this.unbundDevice.memberName = row.memberName;
      },

      /**
       * determine btn(in dialog box)
       */
      unbundSubmit(){
        let self = this;
        intelligentHardwareApi.unbindDevice(self.currentDeviceId).then(res =>{
          self.$message({
            message:'解绑成功',
            type:'success'
          })
          self.unbundled = false;
          self.loadTableData(1);
        });
      },

      /**
       * operation delete
       */
      remove(row){
        this.delDevice = true;
        this.currentDeviceId = row.deviceId;
        this.deleteDevice.deviceType = row.deviceName;
        this.deleteDevice.deviceNo = row.deviceNo;
        this.deleteDevice.bed = row.bedNo;
        this.deleteDevice.memberName = row.memberName;
      },

      /**
       * delete device(box)
       */
      delDevices(){
        let self = this;
        intelligentHardwareApi.deleteDevice(self.currentDeviceId).then(res =>{
          self.$message({
            message:'删除成功',
            type:'success'
          })
          self.delDevice = false;
          self.loadTableData(1);
        });
      },

      /**
       * edit operation(way:2(edit device bind))
       */
      edit(row){
        this.$router.push({name:'deviceBind',params:{way:2,deviceId:row.deviceId}});
      },

      handleCurrentChange(row){
        this.$router.push({name:'deviceBind',params:{way:0,deviceId:row.deviceId}});
      },

      /**
       * paging
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData(this.currentPage);
      },
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>
  .intelligentHardware .input input{
    display: inline-block;
  }
  .intelligentHardware .el-select {
    display: block;
    position: relative;
  }
  .intelligentHardware .el-dialog .input-item{
    margin:10px 0 15px 0;
  }
  .intelligentHardware .input-item .remind .el-input__inner{
    border:none;
    padding-left:0;
    padding-right:0;
    width:80%;
    font-weight:bold;
    margin-left:60px;
  }
  .intelligentHardware .alartRecord{
     cursor: pointer;
     display:inline-block;
     width:50px;
     height:60px;
     position:relative;
     text-align: center;
   }
  .intelligentHardware .alartRecord img{
    width:40px;
    height:40px;
  }
  .intelligentHardware .alartRecord span{
    font-size:12px;
    white-space:nowrap;
    position:absolute;
    bottom:0;
    left:0;
  }
</style>


